<template>
	<view class="record-packbox relative">
		<view v-for="(item, index) in list" :key="index" class="record-item relative">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/item-bg.png`" class="bg" />
			
			<view class="record-top flex relative flex-justify-content-between flex-align-items-center">
				<view style="max-width: 70%;">
					<view class="title">{{ item.wuliu_name || '物流信息：-' }}</view>
					<view v-if="item.wuliu_order_num" class="record-top-box flex flex-align-items-center" @click="copy(item.wuliu_order_num)">
						<view class="box-name truncate" style="max-width: 88%;color: #63FFF7;">{{ item.wuliu_order_num }}</view>
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/copy.png`"
						class="recovery-icon-copy" />
					</view>
				</view>
				<view class="font-hanserif-bold" style="color: #FFFFFF" v-if="item.send_status === 1">待发货</view>
				<view class="font-hanserif-bold" style="color: #63FFF7" v-if="item.send_status === 2">已发货</view>
				<view class="font-hanserif-bold" style="color: #FFFFFF" v-if="item.send_status === 3">已完成</view>
			</view>
			
			<scroll-view scroll-x class="relative imgs-list">
				<view class="flex">
					<view class="imgs-view relative" v-for="(imgItem, imgIndex) in item.detail_list" :key="imgIndex">
						
						<view class="imgs-view-txt relative flex-all-center">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/cover-bg.png`"
							class="bg" mode=""></image>
							<comPlaceImage
								mode="heightFix"
								style="width: 143rpx;height: 143rpx;border-radius: 10rpx;" :lazyLoad="true"
								:src="imgItem.reward_item_cover"></comPlaceImage>
						</view>
						

						<view class="item-name-txt truncate">{{ imgItem.reward_item_name }}</view>
						<view class="item-num-bg absolute">
							<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/num-bg.png`" mode=""></image>
							<text class="relative">x{{ imgItem.reward_item_num }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="relative">
				<view class="title">申请时间</view>
				<view class="box-name">{{ item.apply_time }}</view>
				<view class="title" style="margin-top: 20rpx;">收货地址</view>
				<view class="flex" style="font-size: 24rpx;">
					<view>{{ item.name }}</view>
					<view style="margin-left: 12rpx;">{{ item.phone }}</view>
				</view>
				<view>{{ item.address }}</view>
			</view>

			<view class="relative bottom-btns flex flex-justify-content-between flex-align-items-center">
				<view class="bottom-btns-left flex flex-wrap flex-align-items-baseline font-hanserif-regular">
					<view>总价值：</view>
					<view>¥ <text style="font-size: 38rpx;"> {{ item.total_recovery_price || '0' }}</text></view>
				</view>
				<view class="bottom-btns-right flex">
					<!-- 联系客服 -->
					<button class="btn-view" open-type="contact" @click="gotoUserContact">
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/contact.png`"
						mode="" style="width: 176rpx; height: 60rpx;">
						</image>
					</button>
					<!-- 确认收货 -->
					<image v-if="item.send_status === 2" @click="gotoConfirm(item)" style="margin-left: 18rpx"
						class="btn-view" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/confirm-receipt-btn.png`"
						mode=""></image>
				</view>
			</view>

			<!-- 收货确认弹窗 -->
			<comPromptPopup
				v-model="confirmDialog"
				content="为了保证你的售后权益,请收到商品确认无误后再确认收货!" 
				cancelText="取消" 
				confirmText="确定" 
				@setSureFun="confirmBtn" />

		</view>
	</view>
</template>

<script>
	import {
		getRewardSendConfirmApi
	} from '@/setupproject/INTERFACE.js';
	export default {
		name: 'comRecord',
		props: ['list'],
		data() {
			return {
				confirmDialog: false, // 收货提示
				confirmInfo: {},
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {
			// 显示弹框及弹框信息
			async gotoConfirm(item) {
				this.confirmDialog = true;
				this.confirmInfo = item;
			},
			
			// 确认收货按钮
			async confirmBtn() {
				const {
					data,
					code,
					msg
				} = await getRewardSendConfirmApi({
					order_type: this.confirmInfo.order_type, // order_type	是	string	1,2 列表中有返回字段
					id: this.confirmInfo.id, // id	是	string	列表中有返回字段
				});

				this.confirmDialog = false;
				this.confirmInfo = {};

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				uni.showToast({
					icon: 'success',
					title: msg
				});

				this.$emit('reload');
			},
			
			// 关闭弹框
			closeConfirmDialog() {
				this.confirmDialog = false;
				this.confirmInfo = {};
				
			},

			// 复制订单号
			copy(data) {
				uni.setClipboardData({
					data,
					success: function() {
						uni.showToast({
							title: `已复制：${data}`,
							icon: 'none'
						});
					}
				});
			},

			// APP 调起微信客服
			gotoUserContact() {
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '',
					mask: true
				});

				// 启用拉起客服功能
				uni.share({
					provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
					openCustomerServiceChat: true, // 是否启用拉起客服功能
					corpid: this.$store.getters.commonCustomerWechat.wechatKFcorpid || this.$store.getters.commonConfigs
						.wechatKFcorpid, // 企业ID
					customerUrl: this.$store.getters.commonCustomerWechat.wechatKFcusUrl || this.$store.getters
						.commonConfigs.wechatKFcusUrl, // 客服链接
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					},
					complete: function(comp) {
						console.log('complete:' + JSON.stringify(comp));
						uni.hideLoading();
					}
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				// #endif
			},

		}
	};
</script>

<style lang="scss" scoped>
	.record-packbox {
		width: 100%;
		padding-bottom: 18rpx;

		.record-item {
			color: #FFFFFF;
			font-size: 28rpx;
			margin: auto auto 20rpx;
			padding: 28rpx;
			width: 710rpx;

			.title {
				margin-bottom: 8rpx;
				color: #FFFFFF;
			}

			.box-name {
				font-size: 24rpx;
				margin-bottom: 12rpx;
			}

			.bottom-btns {
				margin-top: 46rpx;
				width: 100%;

				.bottom-btns-left {
					color: #63FFF7;
					font-size: 26rpx;
				}

				.bottom-btns-right {
					.btn-view {
						width: 176rpx;
						height: 60rpx;
					}
				}
			}


			.record-top {
				width: 100%;
				.record-top-box {
					.recovery-icon-copy {
						width: 30rpx;
						height: 30rpx;
						margin: 0 0 16rpx 14rpx;
					}
				}
			}

			.imgs-list {
				overflow: hidden;
				width: 100%;

				.imgs-view {
					margin: 12rpx 22rpx 36rpx 0;
					
					.imgs-view-txt {
						width: 152rpx;
						height: 152rpx;
						overflow: hidden;
					}

					.item-num-bg {
						padding: 0 8rpx 0 0;
						text-align: end;
						font-size: 20rpx;
						color: #FFFFFF;
						right: 2rpx;
						bottom: 50rpx;
						min-width: 48rpx;
						height: 24rpx;
						line-height: 24rpx;
						z-index: 59;
						text-align: center;
					}

					.item-name-txt {
						font-size: 20rpx;
						text-align: center;
						margin-top: 18rpx;
						width: 148rpx;
					}
				}
				
			}
		}
	}

	// 弹框
	.maskview {
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		color: #fff;
		top: 0;
		left: 0;
		z-index: 10000;
		width: 100%;
		height: 100vh;
		
		.delivery-content {
			font-size: 36rpx;
			width: 621rpx;
			height: 334rpx;
			font-weight: bold;
			.delivery-box {
				width: 100%;
				height: 182rpx;
				padding: 0 50rpx 0 34rpx;
				overflow-y: auto;
				left: 16rpx;
				top: 32rpx;
				font-size: 30rpx;
				color: rgba(58, 25, 0, 1);
			}
			.cancel-txt-btn {
				width: 50%;
				height: 92rpx;
				left: 16rpx;
				bottom: 26rpx;
				color: rgba(115, 115, 115, 1);
			}
			.sure-txt-btn {
				width: 50%;
				height: 92rpx;
				right: 16rpx;
				bottom: 26rpx;
				color: rgba(254, 112, 0, 1);
			}
		}
	}
</style>